.page-index {
	position: relative;
	// background: url('/static/infoBg.png') no-repeat;
	background: url('/static/infoBg.png') no-repeat;
	background-size: 100% 100%;
	height: 100vh;
	// min-height: 1080px;
	// min-width: 1960px;
	overflow: hidden;
	// .topBox {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	min-width: 1960px;
	// 	.imageBox {
	// 		width: 370px !important;
	// 		height: 370px !important;
	// 		background: red;
	// 		background: url('/static/image20.png') no-repeat;
	// 		background-size: 100% 100%;
	// 		transform: rotate(45deg);
	// 		// margin-left: 160px;
	// 		opacity: 0.5;
	// 		border: 3px solid transparent;
	// 	}
	// 	.imageBox:hover {
	// 		opacity: 1;
	// 		border: 3px solid #fff;
	// 	}
	// 	.imageRight {
	// 		width: 160px;
	// 	}
	// }
	// .bottomBox {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	margin-top: -100px;
	// 	min-width: 1960px;
	// 	.imageBox {
	// 		width: 370px !important;
	// 		height: 370px !important;
	// 		background: red;
	// 		background: url('/static/image20.png') no-repeat;
	// 		background-size: 100% 100%;
	// 		transform: rotate(45deg);
	// 		// margin-left: 160px;
	// 		opacity: 0.5;
	// 		border: 3px solid transparent;
	// 	}
	// 	.imageBox:hover {
	// 		opacity: 1;
	// 		border: 3px solid #fff;
	// 	}
	// 	.imageRight {
	// 		width: 160px;
	// 	}
	// 	.numBox {
	// 		width: 370px;
	// 		height: 370px;
	// 		// margin-left: 160px;
	// 		transform: rotate(45deg);
	// 		border: 1px solid rgba(255, 255, 255, 0.23);
	// 		background: linear-gradient(135deg, rgba(186, 186, 186, 0.09) 0.76%, rgba(84, 84, 84, 0.09) 101.43%);
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		border: 3px solid transparent;
	// 		.numInfo {
	// 			transform: rotate(-45deg);
	// 			color: rgba(255, 255, 255, 0.35);
	// 			text-align: center;
	// 			font-family: 'FRIZON';
	// 			font-size: 60px;
	// 			font-style: normal;
	// 			font-weight: 400;
	// 			line-height: normal;
	// 		}
	// 	}
	// }
	// .centerBox {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	margin-top: -100px;
	// 	// min-width: 2000px;
	// 	min-width: 1960px;
	// 	.imageBox {
	// 		width: 370px;
	// 		height: 370px;
	// 		background: url('/static/image20.png') no-repeat;
	// 		background-size: 100% 100%;
	// 		transform: rotate(45deg);
	// 		// margin-left: 160px;
	// 		opacity: 0.5;
	// 		border: 3px solid transparent;
	// 	}
	// 	.imageBox:hover {
	// 		opacity: 1;
	// 		border: 3px solid #fff;
	// 	}
	// 	.imageRight {
	// 		width: 160px;
	// 	}
	// 	.numBox {
	// 		width: 370px;
	// 		height: 370px;
	// 		// margin-left: 160px;
	// 		transform: rotate(45deg);
	// 		border: 1px solid rgba(255, 255, 255, 0.23);
	// 		background: linear-gradient(135deg, rgba(186, 186, 186, 0.09) 0.76%, rgba(84, 84, 84, 0.09) 101.43%);
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		border: 3px solid transparent;
	// 		.numInfo {
	// 			transform: rotate(-45deg);
	// 			color: rgba(255, 255, 255, 0.35);
	// 			text-align: center;
	// 			font-family: 'FRIZON';
	// 			font-size: 60px;
	// 			font-style: normal;
	// 			font-weight: 400;
	// 			line-height: normal;
	// 		}
	// 	}
	// }
	.firstBox {
		width: 18.75vw;
		// height: 150px;
		// transform: rotate(45deg);
		// margin-left: 9%;
		margin-right: 16px;
		.emptyBox {
			width: 18.75vw;
			height: 18.75vw;
			opacity: 0.5;
			border: 3px solid transparent;
			margin-bottom: 16px;
		}
		.imageBox {
			position: relative;
			margin-bottom: 16px;
			width: 18.75vw;
			height: 18.75vw;
			.image {
				width: 18.75vw;
				height: 18.75vw;
				opacity: 0.5;
				border: 3px solid transparent;
			}
			.image:hover{
				opacity: 1;
				border: 3px solid #fff;
			}
			.tips {
				position: absolute;
				// width: 20%;
				// height: 20%;
				right: 0;
				bottom: 0;
				border-color: #f16d39;
				width: 0;
				height: 0;
				border: 100px solid;
				border-color: transparent transparent #f16d39 transparent;
				border-width: 0 0 5vw 5vw;
			}
			.content {
				z-index: 999;
				position: absolute;
				width: 20%;
				height: 20%;
				right: 0;
				bottom: 0;
				transform: rotate(-45deg);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-family: 'FRIZON';
				text-align: center;
				// background: red;
			}
		}
		
		.numBox {
			width: 18.75vw;
			height: 18.75vw;
			background: linear-gradient(135deg, rgba(186, 186, 186, 0.09) 0.76%, rgba(84, 84, 84, 0.09) 101.43%);
			border: 3px solid transparent;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 3px solid transparent;
			margin-bottom: 16px;
			.numInfo {
				transform: rotate(-45deg);
				color: rgba(255, 255, 255, 0.35);
				text-align: center;
				font-family: 'FRIZON';
				font-size: 60px;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
		}
	}
	.bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
		z-index: 999;
		.titleBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 230pxpx;
			.titleLeft {
				font-family: 'Frizon';
				color: #d4d5d0;
				font-size: 70px;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
				margin-left: 62px;
			}
			.titleRight {
				color: #d4d5d0;
				text-align: right;
				font-family: 'Dela Gothic One';
				font-size: 40px;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
				width: 714px;
				margin-right: 62px;
			}
		}
		.value {
			height: 81px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 2px solid rgba(212, 213, 208, 0.2);
			.valueLeft {
				font-family: 'Montserrat';
				color: #d4d5d0;
				text-align: right;
				font-size: 20px;
				font-style: normal;
				font-weight: 300;
				line-height: normal;
				padding-left: 48px;
			}
			.valueRight {
				display: flex;
				.Socoals {
					display: flex;
					align-items: center;
					height: 81px;
					width: 370px;
					color: #d4d5d0;
					font-family: 'Dela Gothic One';
					font-size: 24px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					background: #252525;
					justify-content: center;
				}
				.back {
					display: flex;
					align-items: center;
					height: 81px;
					width: 370px;
					color: #d4d5d0;
					font-family: 'Dela Gothic One';
					font-size: 24px;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					background: #f16d39;
					justify-content: center;
				}
			}
		}
	}
	// .images {
	// }
	// .topBox{
	// 	display: flex;
	// 	justify-content: center;
	// 	.imageBox {
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		width: 370px;
	// 		height: 370px;
	// 		transform: rotate(45deg);
	// 		border: dashed transparent;
	// 		border-width: 2px;
	// 		margin-left: 160px;
	// 		position: relative;
	// 		overflow: hidden;
	// 		.images{
	// 			position: absolute;
	// 			margin-top: -75%;
	// 			margin-left: -50%;
	// 			top: 50%;
	// 			left: 33%;
	// 			width: 150%; /* sqrt(2) * 100% 以适应旋转后的菱形 */
	// 			height: 150%;
	// 			// background: url('/static/image20.png');
	// 			transform: rotate(-45deg);
	// 		}
	// 	}
	// }
}
